<template>
  <view>
    <u-navbar placeholder title="商品目录" @rightClick="rightShow = !rightShow" :autoBack="true" rightIcon="more-circle" :rightText="sourceText"> </u-navbar>

    <u-subsection :list="categoryList" fontSize="14" :current="curNow" @change="sectionChange" v-show="rightShow" bgColor="#fff"></u-subsection>
    <view class="m-t-20 p-r-30 p-l-30 m-b-20 flex-center">
      <view @tap="isList = !isList" class="m-r-30">
        <u-icon name="list-dot" color="#2979ff" size="28" v-show="!isList"></u-icon>
        <u-icon name="grid" color="#2979ff" size="28" v-show="isList"></u-icon>
      </view>

      <u-search v-model="searchValue" placeholder="输入商品名称" :showAction="true" actionText="搜索" :animation="true" @custom="searchChange"></u-search>
    </view>

    <u-tabs :list="attrArr" keyName="catName" @click="tabChange"> </u-tabs>

    <scroll-view scroll-y class="scroll-height" @scrolltolower="scrolltolower" v-show="!hasLoading">
      <rf-product-list :list="goodsList" :platform="source" :isList="isList"></rf-product-list>
    </scroll-view>
    <u-loading-page loading v-show="hasLoading"></u-loading-page>
  </view>
</template>

<script>
import rfProductList from '@/components/rf-product-list'
export default {
  components: {
    rfProductList
  },
  data() {
    return {
      hasLoading: false,
      isList: false,
      curNow: 0,
      categoryList: [], // 分类列表
      attrArr: [],
      cat: '1',
      source: 'jd',
      sourceText: '京东',
      goodsList: [],
      current: 1,
      more: 'more',
      rightShow: false,
      searchValue: '',
      searchMode: false
    }
  },
  onLoad() {
    this.initData()
  },
  methods: {
    // 切换平台
    sectionChange(index) {
      this.curNow = index
      this.source = this.categoryList[index].source
      this.sourceText = this.categoryList[index].name
      this.current = 1
      // this.cat = 1
      this.getGoodsList(true)
      this.getAttrArr(this.source)
    },
    // 初始化数据
    initData() {
      this.getNavList()
      this.getAttrArr(this.source)

      this.getGoodsList()
    },
    //非搜索获取商品列表
    async getGoodsList(type) {
      let obj = {
        current: this.current,
        size: 10,
        source: this.source,
        cat: this.cat
      }
      if (type) {
        this.hasLoading = true
      }

      await uni.$u.http.post('unionapi/goodsJingxuan', obj).then(data => {
        this.hasLoading = false
        this.current += 1
        if (type) {
          this.goodsList = data.list
        } else {
          this.goodsList = [...this.goodsList, ...data.list]
        }

        data.list.length < 10 ? (this.more = 'nomore') : (this.more = 'more')
      })
    },
    //获取平台列表
    async getNavList() {
      await uni.$u.http.post('unionapi/getplatform').then(data => {
        this.categoryList = data.list
      })
    },
    //根据平台获取分类列表
    async getAttrArr(source) {
      await uni.$u.http.post('unionapi/goodsCategory', { source }).then(data => {
        this.attrArr = data.list
      })
    },
    //点击搜索
    searchChange() {
      this.current = 1
      this.searchMode = true //开启搜索模式
      this.getSearchGoodsList(true)
    },
    // 搜索商品列表
    async getSearchGoodsList(type) {
      let obj = {
        current: this.current,
        keyword: this.searchValue,
        size: 10,
        source: this.source
      }
      if (type) {
        this.hasLoading = true
      }
      await uni.$u.http
        .post('unionapi/getGoodsSearch', obj)
        .then(data => {
          this.hasLoading = false
          this.current += 1
          if (type) {
            this.goodsList = data.list
          } else {
            this.goodsList = [...this.goodsList, ...data.list]
          }
          data.list.length < 10 ? (this.more = 'nomore') : (this.more = 'loading')
        })
        .catch(err => {})
    },
    tabChange(item) {
      this.cat = item.cat
      this.getGoodsList(true)
    },
    //加载更多
    scrolltolower() {
      if (this.more === 'nomore') return
      if (this.searchMode) {
        this.getSearchGoodsList()
      } else {
        this.getGoodsList()
      }
    }
  }
}
</script>

<style>
page {
  background-color: #fff;
}
</style>

<style lang="scss" scoped>
.scroll-height {
  height: calc(100vh - 142px);
}
</style>
